<template>
    <view class="container">
        <!-- 457px -->
        <div class="tabbox">
            <div class="tabboxinner">
                <div :class="{ tabitem: true, 'tabitem-active': tabflag === 2 }" @click="changetab(2)">
                    意向客户
                </div>
                <div :class="{ tabitem: true, 'tabitem-active': tabflag === 1 }" @click="changetab(1)">
                    推广样式
                </div>
            </div>
        </div>
        <!-- 推广码 -->
        <div class="promotion" v-if="tabflag == 1">
            <view class="template">
                <view :class="[templateIndex == index ? 'active' : 'template-i']" v-for="(item, index) in mbarr"
                    :key="index" @click="templateTab(index)">
                    {{ item }}
                </view>
            </view>
            <view v-for="(item, index) in fileUrl" :key="index">
                <view :style="{ width: 686 + 'rpx', height: item.height + 'rpx', padding: '0 0 200rpx 0' }" v-if="templateIndex === index">
                    <image class="swiper-img" :src="item.imgUrl" />
                </view>
            </view>
            <!-- <div class="canvas-image"> -->
            <canvas v-for="(item, i) in imgConfig" :key="i" class="canvas" :canvas-id="item.id" :style="{
                width: 686 + 'rpx',
                height: item.height + 'rpx',
                backgroundColor: '#fafafc',
                borderRadius: 6 + 'px',
                top: -(item.height * 2) + 'rpx',
            }
                "></canvas>
            <!-- <canvas class="canvas" canvas-id="secondCanvas" v-if="screenPixels" style="
                    width: 686rpx;
                    height: 1756rpx;
                    background-color: #fafafc;
                    border-radius: 6px;
                "></canvas>
            <canvas class="canvas" canvas-id="thirdCanvas" v-if="screenPixels" style="
                    width: 686rpx;
                    height: 1478rpx;
                    background-color: #fafafc;
                    border-radius: 6px;
                "></canvas> -->
            <!-- </div> -->
            <view
                style="position: fixed;bottom: 0;left: 0;display: flex;align-items: center;justify-content: center;width: 100vw;">
                <button class="long-btn mybtn" @click="saveToAlbum">
                    保存到相册
                </button>
            </view>
        </div>
        <!-- 意向客户 -->
        <div class="client" v-if="tabflag == 2">
            <div class="sxbox">
                <div class="l">
                    <picker @change="changeselect" :range="khtypearr" style="margin-right: 16rpx">
                        <view :class="{
                            dark: true,
                            activeblue: showlistflag === 1 || showlistflag === 3,
                        }">
                            <view class="uni-input">{{ khtypearr[clientsType] }}</view>
                            <image v-if="showlistflag === 2" style="margin-left: 6rpx" class="fatalismimg"
                                src="/static/achievement-reports-form/dropdown.png" />
                            <image style="
                                    width: 16rpx;
                                    height: 10rpx;
                                    margin-left: 6rpx;
                                " v-if="showlistflag === 1 || showlistflag === 3" class="fatalismimg"
                                src="/static/achievement-reports-form/dropdownc.png" />
                        </view>
                    </picker>
                    <!-- <picker @change="" :range="khtypearr"> -->
                    <!-- <view class="pickerbox"> -->
                    <view @click="changeoldlist(2)" :class="{ dark: true, activeblue: showlistflag === 2 }"
                        style="text-align: center; width: 100%">模版客户</view>
                    <!-- <image
                class="fatalismimg"
                src="/static/achievement-reports-form/dropdown.png"
              /> -->
                    <!-- </view> -->
                    <!-- </picker> -->
                </div>
                <div class="r" v-if="showlistflag === 1">
                    <picker @change="changestatus" :range="statusarr">
                        <view class="pickerboxc">
                            <view class="uni-input">{{
                                statusarr[statusindex]
                            }}</view>
                            <image class="fatalismimg" src="/static/achievement-reports-form/dropdown.png" />
                        </view>
                    </picker>
                </div>
                <div class="r" v-if="showlistflag === 3">
                    <picker @change="changeyxstatus" :range="yxstatusarr">
                        <view class="pickerboxc">
                            <view class="uni-input">{{
                                yxstatusarr[yxstatusindex]
                            }}</view>
                            <image class="fatalismimg" src="/static/achievement-reports-form/dropdown.png" />
                        </view>
                    </picker>
                </div>
            </div>
            <div class="searchbox" v-if="showlistflag === 1 || showlistflag === 3">
                <img class="img" src="../../static/search.png" alt="" />
                <input class="ipt" type="text" @input="iptchange" v-model="searchtext" placeholder="搜索客户名称" />
            </div>
            <div v-if="showlistflag === 2">
                <no-data v-if="clientlist.length === 0" />
                <div class="client_list" v-for="(ele, index) in clientlist" :key="index">
                    <div class="client_info">
                        <div class="name">{{ ele?.contactName }}</div>
                        <div>
                            <span class="lable">电话号：</span>
                            <span class="phonenumber labletext">{{
                                ele?.phone
                            }}</span>
                            <span class="lable">访问时间：</span>
                            <span class="time labletext">{{
                                dateFormat(
                                    "mm-dd",
                                    new Date(ele?.createTime)
                                )
                            }}
                                {{
                                    dateFormat(
                                        "HH-MM",
                                        new Date(ele?.createTime)
                                    )
                                }}</span>
                        </div>
                    </div>
                    <div class="phonebtn" @click="callphone(ele?.phone)">
                        <img class="phoneicom" src="../../static/phone.png" alt="" />
                    </div>
                </div>
            </div>
            <div v-if="showlistflag === 1">
                <no-data v-if="ndlist.length === 0" />
                <div class="client_listc" v-for="(ele, index) in ndlist" :key="index">
                    <div class="top">
                        <div class="msginfo">
                            <div class="infoitem name">
                                {{ ele.customName }}
                            </div>
                            <div class="infoitem">
                                <span class="lable">线索：</span>
                                <span class="lablecontent" style="margin-right: 10rpx">{{ ele.contactName }}</span>
                                |
                                <span class="lablecontent" style="margin-left: 10rpx">{{ ele.contactPhone }}</span>
                            </div>
                            <div class="infoitem">
                                <span class="lable">推荐人：</span>
                                <span class="lablecontent" style="margin-right: 10rpx">{{ ele.userName }}</span>
                                |
                                <span class="lablecontent" style="margin-left: 10rpx">{{ ele.companyName }}</span>
                            </div>
                        </div>
                        <div class="status" v-if="ele.dealStatus === 0">
                            待跟进
                        </div>
                        <div class="status" style="color: #ffa814" v-if="ele.dealStatus === 1">
                            跟进中
                        </div>
                        <div class="status" style="color: #00d679" v-if="ele.dealStatus === 2">
                            已成交
                        </div>
                        <div class="status" style="color: #00d679" v-if="ele.dealStatus === 3">
                            已申请
                        </div>
                        <div class="status" style="color: #9497b1" v-if="ele.dealStatus === 4">
                            已结算
                        </div>
                        <div class="status" style="color: #ff7642" v-if="ele.dealStatus === 5">
                            申请失败
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="jsbtn" v-if="ele.dealStatus !== 3 && ele.dealStatus !== 4"
                            @click="editstatus(3, ele.id)">
                            申请结算
                        </div>
                        <div class="jsbtn none" v-if="ele.dealStatus === 4">
                            申请结算
                        </div>
                        <div class="jsbtn" v-if="ele.dealStatus === 3" @click="editstatus(1, ele.id)">
                            取消申请
                        </div>
                        <div class="phonebtn" @click="
                            makecall(
                                ele.contactPhone,
                                ele.dealStatus,
                                ele.id
                            )
                            ">
                            <img class="phoneicom" src="../../static/phone.png" alt="" />
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="showlistflag === 3">
                <no-data v-if="ndlist.length === 0" />
                <div class="client_listc" v-for="(ele, index) in ndlist" :key="index">
                    <div class="top">
                        <div class="msginfo">
                            <div class="infoitem name">
                                {{ ele.companyName }}
                            </div>
                            <div class="infoitem">
                                <span class="lablecontent" style="margin-right: 10rpx">{{ ele.createTime }}</span>
                            </div>
                            <div class="infoitem">
                                <span class="lable">意向产品：</span>
                                <span v-if="ele.productType === 0" class="lablecontent" style="margin-right: 10rpx">{{
                                    '发薪' }}</span>
                                <span v-if="ele.productType === 1" class="lablecontent" style="margin-right: 10rpx">{{
                                    '电子签' }}</span>
                                <span v-if="ele.productType === 2" class="lablecontent" style="margin-right: 10rpx">{{
                                    '投保' }}</span>
                            </div>
                        </div>
                        <div class="status" v-if="ele.followId === null">
                            待跟进
                        </div>
                        <div class="status" style="color: #ffa814" v-if="ele.status === 0">
                            {{ ele.followId === ele.salesId ? '跟进中' : '他人跟进' }}
                        </div>
                        <div class="status" style="color: #00d679" v-if="ele.status === 1">
                            已成交
                        </div>
                    </div>
                    <div class="bottom">
                        <div v-if="ele.status === 0 && (ele.followId === ele.salesId)" class="jsbtn"
                            @click="changecustomInfo(ele)">
                            成交
                        </div>
                        <div class="phonebtn" v-if="(ele.followId === null) || (ele.followId === ele.salesId)"
                            @click="makecallyx(ele)">
                            <img class="phoneicom" src="../../static/phone.png" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </view>
</template>

<script setup lang="ts">
import {
    onLoad,
    onReady,
    onReachBottom,
    onPullDownRefresh
} from '@dcloudio/uni-app'
import { ref } from 'vue'
import { shake } from '@/utils/util'
import user from '@/utils/user'
import noData from '@/components/no-data/no-data.vue'
import {
    urlTobase64,
    base64ToLoaclFile,
    toast,
    dateFormat,
    toBase64
} from '../../utils/util'
import Canvas from '../../utils/canvas'
import {
    createInviteQrCode,
    getclientsapi,
    editstatusapi,
    getrecordlistapi,
    getSubscribeProductListApi,
    customInfoApi,
    changecustomInfoApi,
    getPosterListApi
} from '../../api/user'
const searchtext = ref('')
const statusindex = ref(5)
const yxstatusindex = ref(0)
const changeoldlist = (i: any) => {
    showlistflag.value = i
    hasNextPage.value = true
    clientlist.value = []
    clinetspageNumber.value = 1
    getclients()
}
const changecustomInfo = async (val: any) => {
    const res: any = await changecustomInfoApi({
        phone: val.phone,
        customId: val.customId,
        isDeal: 1
    })
    nodelistpagenum.value = 1
    ndhasnext.value = true
    ndlist.value = []
    getSubscribeProductList()
}
const mbarr = ref(['活动模板1', '模板2', '模板3'])
const makecall = (phone: any, i: any, id: any) => {
    if (i === 0) {
        editstatus(1, id)
    }
    hasNextPage.value = true
    clientlist.value = []
    clinetspageNumber.value = 1
    getclients()
    uni.makePhoneCall({
        phoneNumber: phone + ''
    })
}
const makecallyx = (ele: any) => {
    console.log(ele)
    customInfoApi({
        userName: ele.userName,
        companyName: ele.companyName,
        phone: ele.phone,
        position: ele.position,
        productType: ele.productType,
        createTime: ele.createTime,
        salesName: ele.salesName,
        deptName: ele.deptName,
        salesId: ele.salesId
    })
    nodelistpagenum.value = 1
    ndhasnext.value = true
    ndlist.value = []
    getSubscribeProductList()
    uni.makePhoneCall({
        phoneNumber: ele.phone + ''
    })
}
const changeselect = (e: any) => {
    console.log(e, 'eeee')
    clientsType.value = e.detail.value * 1
    if (e.detail.value === '0') {
        showlistflag.value = 1
        nodelistpagenum.value = 1
        ndhasnext.value = true
        ndlist.value = []
        getrecordlist()
    } else {
        showlistflag.value = 3
        nodelistpagenum.value = 1
        ndhasnext.value = true
        ndlist.value = []
        getSubscribeProductList()
    }
}
const changestatus = (e: any) => {
    statusindex.value = e.detail.value * 1
    ndhasnext.value = true
    nodelistpagenum.value = 1
    ndlist.value = []
    reqstatus.value = statusarrc.value[statusindex.value]
    getrecordlist()
}
const changeyxstatus = (e: any) => {
    yxstatusindex.value = e.detail.value * 1
    ndhasnext.value = true
    nodelistpagenum.value = 1
    ndlist.value = []
    yxreqstatus.value = yxstatusarrc.value[yxstatusindex.value]
    getSubscribeProductList()
}
const iptchange = () => {
    if (showlistflag.value === 1) {
        shake(() => {
            ndhasnext.value = true
            nodelistpagenum.value = 1
            ndlist.value = []
            getrecordlist()
        }, 300)
    } else if (showlistflag.value === 3) {
        shake(() => {
            ndhasnext.value = true
            nodelistpagenum.value = 1
            ndlist.value = []
            getSubscribeProductList()
        }, 300)
    }
}
const showlistflag = ref(3)
const bg = ref([

])
const editstatus = (dealstatus: any, id: any) => {
    editstatusapi({
        dealStatus: dealstatus,
        id
    }).then((res: any) => {
        if (res) {
            ndlist.value.forEach((ele: any, i: any) => {
                if (ele.id === id) {
                    ele.dealStatus = dealstatus
                }
            })
            // ndhasnext.value = true;
            // ndlist.value = [];
            // nodelistpagenum.value = 1;
            // getrecordlist();
            uni.showToast({
                title: '操作成功',
                icon: 'none'
            })
        }
        console.log(res, 'editediteditediteditedit')
    })
}
const reqstatus = ref<any>('')
const yxreqstatus = ref<any>('')
const getSubscribeProductList = () => {
    getSubscribeProductListApi({
        pageSize: 10,
        pageNum: nodelistpagenum.value,
        searchText: searchtext.value,
        status: yxreqstatus.value
    }).then((res: any) => {
        console.log(res, 'listlistlistlistlist')
        ndlist.value = ndlist.value.concat(res.list)
        ndhasnext.value = res.hasNextPage
    })
}
const getrecordlist = () => {
    getrecordlistapi({
        pageSize: 10,
        pageNum: nodelistpagenum.value,
        // searchText: searchtext.value,
        searchCustomText: searchtext.value,
        dealStatus: reqstatus.value
    }).then((res: any) => {
        console.log(res, 'listlistlistlistlist')
        ndlist.value = ndlist.value.concat(res.list)
        ndhasnext.value = res.hasNextPage
    })
}
const ndhasnext = ref(true)
const nodelistpagenum = ref(1)
const ndlist = ref<any>([])
const clientsType = ref(1)
const khtypearr = ref<any>(['活动客户', '意向客户'])
const statusarr = ref<any>([
    '待跟进',
    '跟进中',
    '已申请',
    '已结算',
    '申请失败',
    '全部'
])
const statusarrc = ref<any>([0, 1, 3, 4, 5, ''])
const yxstatusarr = ref<any>([
    '全部',
    '跟进中',
    '未跟进',
    '已成交'
])
const yxstatusarrc = ref<any>(['', '0', '2', '1'])
const userUrl = ref('')
const templateIndex = ref(0)
const userName = ref('')
const phone = ref('')
const userId = ref()
const fileUrl = ref([]) as any
const screenPixels = ref(wx.getSystemInfoSync().windowWidth / 780)
const isios15 = ref(false)
// const qrcode = ref('')
const resQrcode = ref('')
const tabflag = ref(2)
const clientlist: any = ref([])
onLoad(async () => {
    const aaa = wx.getSystemInfoSync()
    console.log(aaa, 'guhfdhfujghuj')
    isios15.value = wx.getSystemInfoSync().model.includes('iPhone 15')
    userUrl.value = user.salesHeadUrl as string
    userName.value = user.userName as string
    phone.value = user.phone as string
    userId.value = user.userId as number
    // console.log(res, '调用啦')
    // getclients()
    // getrecordlist()
    getSubscribeProductList()
    const res: any = await getPosterListApi({ dictType: 'saas_promotion_poster' })
    console.log(res, '调用啦111')
    mbarr.value = res.map((ele: any) => {
        return ele.dictLabel
    })
    bg.value = res.map((ele: any) => {
        return {
            original: ele.dictValue,
            preview: ele.dictValue
        }
    })
})
const clinetspageSize = ref(10)
const clinetspageNumber = ref(1)
const hasNextPage = ref(true)
onReachBottom(() => {
    console.log(showlistflag.value, ndhasnext.value, 'fsfsgh')
    if (tabflag.value === 1) {
        if (showlistflag.value === 2) {
            if (hasNextPage.value) {
                clinetspageNumber.value = clinetspageNumber.value + 1
                getclients()
            } else {
                console.log('没数据了')
            }
        } else if (showlistflag.value === 3) {
            if (ndhasnext.value) {
                nodelistpagenum.value = nodelistpagenum.value + 1
                getSubscribeProductList()
            } else {
                console.log('没数据了')
            }
        } else if (showlistflag.value === 1) {
            if (ndhasnext.value) {
                nodelistpagenum.value = nodelistpagenum.value + 1
                getrecordlist()
            } else {
                console.log('没数据了')
            }
        }
    }
})
onPullDownRefresh(() => {
    console.log(1111)
    ndhasnext.value = true
    ndlist.value = []
    nodelistpagenum.value = 1
    clientlist.value = []
    hasNextPage.value = true
    clinetspageNumber.value = 1
    if (showlistflag.value === 2) {
        getclients()
    } else if (showlistflag.value === 3) {
        getSubscribeProductList()
    } else if (showlistflag.value === 1) {
        getrecordlist()
    }
})
// 获取意向客户
const getclients = async () => {
    const res: any = await getclientsapi({
        pageSize: clinetspageSize.value,
        pageNum: clinetspageNumber.value
    })
    console.log(res)
    const arr = res.list
    clientlist.value = clientlist.value.concat(arr)
    hasNextPage.value = res.hasNextPage
}
const changetab = async (i: any) => {
    tabflag.value = i
    if (i === 1) {
        await onCreateInviteQrCode()
    }
}
const templateTab = async (index: any) => {
    templateIndex.value = index
    // await saveQrCode(resQrcode.value)
}
const onSwiper = async (event: any) => {
    templateIndex.value = event.detail.current
}
const callphone = (phone: any) => {
    uni.makePhoneCall({
        phoneNumber: phone,
        success: (result) => {
            console.log(result)
        },
        fail: (result) => {
            console.log(result)
        }
    })
}
/**
 * 保存到相册
 */
const saveToAlbum = () => {
    uni.saveImageToPhotosAlbum({
        filePath: fileUrl.value[templateIndex.value].imgUrl,
        success: () => {
            toast('保存成功', 'success')
        },
        fail: (err) => {
            console.log(err, 'gsguyuy')
            toast('保存失败', 'none')
        }
    })
}
const savecanvas = (id: string, height: number) => {
    return new Promise((resolve) => {
        uni.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: 370,
            height,
            canvasId: id,
            success: (res) => {
                console.log(res, 'resres')
                const img = res.tempFilePath
                console.log(img, '查看文件路径')
                resolve(img)
                // fileUrl.value.push(img);
                // console.log(fileUrl.value, "fileUrl");
            }
        })
    })
}
const onCreateInviteQrCode = async () => {
    createInviteQrCode({
        appId: 'wxbbfa5e35df811d5c',
        page: 'pages/index/index',
        width: '132',
        scene: 'uId=' + userId.value
    }).then((res) => {
        base64ToLoaclFile(
            res,
            Math.ceil(Math.random() * 10000000000) + '.png'
        ).then(async (resCode) => {
            console.log(resCode, '返回值')
            resQrcode.value = resCode as any
            await createConfig()
            await saveQrCode(resQrcode.value)
        })
    })
}
const createConfig = async () => {
    const num = !isios15.value ? 712 : 670
    const num2 = !isios15.value ? 3.5 : 3.2
    bg.value.forEach(async (item: any, i: number) => {
        const res = await wx.getImageInfo({
            src: item.original
        })
        imgConfig.value[i] = {
            height: (num * screenPixels.value / res.width * res.height) * num2 * screenPixels.value + 310,
            id: 'canvas' + i
        }
    })
    console.log(imgConfig.value, 'sgsfgys')
}
const wait = async (timeout = 1000) => {
    return new Promise((resolve) => {
        setTimeout(resolve, timeout)
    })
}
const imgConfig = ref<any>([])
const saveQrCode = async (qrcode: any) => {
    console.log(!isios15.value, '9999999999999999999999')
    const num = !isios15.value ? 712 : 670
    const num2 = !isios15.value ? 3.5 : 3.2
    console.log(num, '9999999999999999999999')
    const avatarUrl = await toBase64(userUrl.value)
    // const avatarUrl = await urlTobase64(userUrl.value);

    const url = await base64ToLoaclFile(avatarUrl as string, 'avatar.png')

    console.log(2333, url)

    let curl = ''
    wx.getImageInfo({
        src: url,
        success: function (res: any) {
            curl = res.path
        }
    })

    bg.value.forEach(async (item, index) => {
        await wait(100)
        // const map = {
        //     0: 'firstCanvas',
        //     1: 'secondCanvas',
        //     2: 'thirdCanvas'
        // } as any
        const res = await wx.getImageInfo({
            src: item.original
        })
        const ctx = uni.createCanvasContext('canvas' + index)
        const canvas = new Canvas(ctx as any)

        // const totalHeight = res.height * 4 * screenPixels.value + 310
        const totalHeight = (638 * screenPixels.value / res.width * res.height) * num2 * screenPixels.value + 310
        // 最外层矩形
        canvas.roundRectColor(
            0,
            0,
            num * screenPixels.value,
            // (!isios15.value ? 712 : 680) * screenPixels.value,
            totalHeight,
            8,
            '#ffffff'
        )
        // 画矩形
        // canvas.roundRectColor((26 * screenPixels.value), (26 * screenPixels.value), ((num - 52) * screenPixels.value), (980 * screenPixels.value), 6, '#ffffff')
        // 背景图
        ctx.setFillStyle('#ffffff')
        let originalUrl = item.original
        console.log(222, res)
        if (item.original.startsWith('http')) {
            originalUrl = res.path
        }
        canvas.drawHeightCutImage(
            26 * screenPixels.value,
            26 * screenPixels.value,
            (num - 52) * screenPixels.value,
            // res.height * 2 * screenPixels.value,
            // res.height * 2 * screenPixels.value,
            ((num - 52) * screenPixels.value / res.width * res.height) * 2 * screenPixels.value,
            ((num - 52) * screenPixels.value / res.width * res.height) * 2 * screenPixels.value,
            originalUrl
        )
        // 名字
        canvas.fillText(
            userName.value,
            72 * screenPixels.value,
            // (res.height * 2 + 138) * screenPixels.value,
            (((num - 52) * screenPixels.value / res.width * res.height) * 2 + 138) * screenPixels.value,
            '#202536',
            18,
            'left',
            true
        )
        // 名字加手机号
        canvas.fillText(
            '手机号：',
            72 * screenPixels.value,
            (((num - 52) * screenPixels.value / res.width * res.height) * 2 + 206) * screenPixels.value,
            '#3D3D3D',
            12
        )
        canvas.fillText(
            '' + phone.value,
            168 * screenPixels.value,
            (((num - 52) * screenPixels.value / res.width * res.height) * 2 + 206) * screenPixels.value,
            '#A09FA4',
            12
        )
        // 标题
        canvas.fillText(
            '格' + '   ' + '言：',
            72 * screenPixels.value,
            (((num - 52) * screenPixels.value / res.width * res.height) * 2 + 254) * screenPixels.value,
            '#3D3D3D',
            12
        )
        canvas.fillText(
            '让一部分人力公司先飞起来',
            168 * screenPixels.value,
            (((num - 52) * screenPixels.value / res.width * res.height) * 2 + 254) * screenPixels.value,
            '#A09FA4',
            12
        )
        // 头像
        canvas.drawRoundImage(
            96 * screenPixels.value,
            (((num - 52) * screenPixels.value / res.width * res.height) * 2 - 42) * screenPixels.value,
            136 * screenPixels.value,
            url as string,
            '#fff'
        )
        // 二维码放置
        console.log(qrcode, 'qrcode')
        // canvas.roundRectColor((446 * screenPixels.value), (834 * screenPixels.value), (148 * screenPixels.value), (148 * screenPixels.value), 6, '#ffffff')
        canvas.drawRoundImage(
            472 * screenPixels.value,
            (((num - 52) * screenPixels.value / res.width * res.height) * 2 + 112) * screenPixels.value,
            148 * screenPixels.value,
            qrcode,
            '#fff'
        )
        ctx.draw(true)
        await wait(100)
        const imgUrl = await savecanvas('canvas' + index, totalHeight)
        await wait(100)
        console.log(444, fileUrl.value)
        fileUrl.value[index] = { imgUrl, height: (totalHeight) }
        // fileUrl.value.push(imgUrl);
    })
}
// 分页
</script>

<style lang="scss" scoped>
.swiper-img {
    width: 100%;
    height: 100%;
}

.promotion {
    width: 100%;
    box-sizing: border-box;
    padding: 8rpx 32rpx 32rpx;
}

.client {
    width: 100%;
    box-sizing: border-box;
    padding: 8rpx 32rpx 50rpx;
    overflow: auto;

    .client_list {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 140rpx;
        background-color: #ffffff;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin-top: 24rpx;
        padding: 32rpx 32rpx 50rpx 24rpx;
    }
}

.client_info {
    .name {
        font-size: 32rpx;
        color: #202536;
        margin-bottom: 20rpx;
    }

    .lable {
        color: #9497b1;
        font-size: 24rpx;
    }

    .labletext {
        color: #202536;
        font-size: 24rpx;
    }
}

.phonebtn {
    width: 90rpx;
    height: 53rpx;

    .phoneicom {
        width: 100%;
        height: 100%;
    }
}

.phonenumber {
    margin-right: 26rpx;
}

.tabbox {
    width: 100%;
    box-sizing: border-box;
    padding: 32rpx;
    height: 88rpx;
    display: flex;
    align-items: center;

    .tabboxinner {
        width: 100%;
        background-color: #f4f4f7;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4rpx;
        border-radius: 44rpx 44rpx 44rpx 44rpx;

        .tabitem {
            flex: 1;
            text-align: center;
            height: 80rpx;
            line-height: 80rpx;
            border-radius: 40rpx;
            font-size: 28rpx;
            color: #565868;
            font-weight: 400;
        }

        .tabitem-active {
            background-color: #ffffff;
            color: #202536;
            font-size: 32rpx;
            font-weight: 600;
        }
    }
}

.container {
    background: #fafafc;
    padding: 0;
}

.canvas {
    // margin: 0 auto;
    position: fixed;
    left: 0;
}

.template {
    margin: 16rpx auto 20rpx auto;
    display: flex;
    align-items: center;
    // justify-content: space-around;
    width: 100%;
    gap: 20rpx;
    overflow-x: scroll;
    box-sizing: border-box;
    padding: 0 40rpx;

    .active {
        border-radius: 40rpx;
        background: #ffffff;
        padding: 13rpx 57rpx;
        box-sizing: border-box;
        color: #3e5ff5;
        flex-shrink: 0;
        border: 1rpx solid #3e5ff5;
    }
}

.template-i {
    border-radius: 27rpx;
    background: #ffffff;
    padding: 13rpx 57rpx;
    flex-shrink: 0;
    color: #9497b1;
}

.long-btn {
    background: #3e5ff5;
    margin-top: 50rpx;
    margin-bottom: 20rpx;
}

.canvas-image {
    width: 686rpx;
    box-sizing: border-box;
    height: 1058rpx;
    padding: 22rpx;
    background-color: #ffffff;
    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(37, 38, 41, 0.04);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.searchbox {
    margin-bottom: 24rpx;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28rpx 36rpx;
    box-sizing: border-box;
    border-radius: 44rpx;
    background-color: #ffffff;

    .img {
        width: 28rpx;
        height: 28rpx;
        margin-right: 12rpx;
    }

    .ipt {
        flex: 1;
        flex-shrink: 0;
    }
}

.sxbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48rpx;
    padding: 28rpx 20rpx;

    .fatalismimg {
        width: 20rpx;
        height: 20rpx;
    }

    .r {
        flex-shrink: 0;
    }

    .l {
        display: flex;
        align-items: center;
    }

    .pickerbox {
        margin-right: 16rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 12rpx 24rpx;
        background-color: #dee0e3;
        width: 168rpx;
        height: 48rpx;
        border-radius: 24rpx;
    }

    .pickerboxc {
        margin-right: 16rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        height: 48rpx;
    }
}

.client_listc {
    width: 100%;
    box-sizing: border-box;
    padding: 32rpx 24rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 24rpx;

    .bottom {
        padding-top: 24rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .jsbtn {
            width: 130rpx;
            height: 52rpx;
            background-color: #ffffff;
            border-radius: 130rpx;
            border: 2rpx solid #dee0e3;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16rpx;
            box-sizing: border-box;
        }

        .none {
            color: #9497b1 !important;
            border: 2rpx solid #dee0e3;
        }
    }

    .top {
        border-bottom: 1px solid #f4f4f7;
        display: flex;
        justify-content: space-between;

        .status {
            width: 100rpx;
            color: #3e5ff5;
            font-size: 24rpx;
            text-align: end;
        }

        .msginfo {
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            flex: 1;

            .infoitem {
                display: flex;
                align-items: center;
                margin-bottom: 20rpx;

                .lablecontent {
                    font-size: 24rpx;
                    color: #202536;
                }

                .lable {
                    font-size: 24rpx;
                    color: #9497b1;
                }
            }

            .name {
                font-size: 32rpx;
                font-weight: 600;
            }
        }
    }
}

.activeblue {
    color: #3e5ff5 !important;
    background-color: #e5eeff !important;
}

.dark {
    padding: 6rpx 24rpx;
    width: 144rpx;
    height: 48rpx;
    background-color: #dee0e3;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24rpx;
}
</style>
